fashion-ssr-vue3/pages/brand/[id].vue

<!-- @format -->

<script lang="ts" setup>
import { useBrandDetailData } from "./useBrandDetailData"
import { setBrandFavoriteApi } from "~/api/model/brand"
import { useUserStore } from "@/stores/modules/user"
import { ConstKeys } from "~/enums/const-enums"

const route = useRoute()
const id = route.params.id

const { data, pending, error, refresh } = await useAsyncData(
  "brand-detail",
  () => $fetch(`${ConstKeys.DOMAINPRO}/client/brand/detail`, { params: { id } })
)
const seoData = data.value?.result

useHead({
  title: `Shop ${seoData?.brandName} Brand Wholesale | EJET Selection`,
  meta: [
    {
      name: "description",
      content: `Explore EJET Selection's Top Brands, featuring trusted Chinese wholesale suppliers known for quality and innovation. Discover unique and exclusive home decor products for your store.`,
    },
    {
      property: "og:title",
      content: `Shop ${seoData?.brandName} Brand Wholesale | EJET Selection`,
    },
    {
      property: "og:description",
      content: `Explore EJET Selection's Top Brands, featuring trusted Chinese wholesale suppliers known for quality and innovation. Discover unique and exclusive home decor products for your store.`,
    },
    {
      property: "og:image",
      content: seoData?.headeImage,
    },
    {
      property: "og:url",
      content: `${ConstKeys.DOMAINPRO}/brand/${id}`,
    },
    {
      property: "og:type",
      content: "website",
    },
    {
      property: "twitter:title",
      content: `Shop ${seoData?.brandName} Brand Wholesale | EJET Selection`,
    },
    {
      property: "twitter:description",
      content: `Explore EJET Selection's Top Brands, featuring trusted Chinese wholesale suppliers known for quality and innovation. Discover unique and exclusive home decor products for your store.`,
    },
    {
      property: "twitter:site",
      content: `${ConstKeys.DOMAINPRO}/brand/${id}`,
    },
    {
      property: "twitter:image",
      content: seoData?.headeImage,
    },
    {
      property: "twitter:card",
      content: "summary_large_image",
    },
  ],
  link: [
    {
      rel: "canonical",
      href: `${ConstKeys.DOMAINPRO}/brand/${id}`,
    },
  ],
})

const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
const { openLoginModal } = useLoginModal()
const { openMessageModal } = useMessageModal()
const {
  detail,
  getDetailInfo,
  brandGoodsList,
  page_size,
  changePage,
  total,
  currentPage,
  handleSelectedCategory,
} = useBrandDetailData()
const tagList = computed(() => {
  console.log("taglist", detail.value?.brandTag?.split(","))
  return detail.value?.brandTag?.split(",") || []
})
async function onFavorite(item: any) {
  try {
    const { status } = await openLoginModal()
    if (status) {
      const params = { bid: item.id, type: item.isFavorite ? 2 : 1 }
      await setBrandFavoriteApi(params)
      item.isFavorite = !item.isFavorite
      ElMessage({
        message: `${item.isFavorite ? "Add" : "Remove"} to My Favourites Successfully`,
        type: "success",
        plain: true,
      })
    }
  } catch (error) {
    console.log(error)
  }
}
async function getAsyncData() {
  await getDetailInfo()
  await handleSelectedCategory("")
}
getAsyncData()
async function openMessage() {
  const { status } = await openLoginModal()
  if (status) {
    const res = await openMessageModal(detail.value)
    console.log(res)
  }
}
</script>

<template>
  <div class="">
    <img
      :src="detail?.headeImage"
      class="w-full h-400px object-cover"
      alt=""
      srcset=""
    />
    <div
      class="w-1400px mx-auto pt-110px pb-20px pos-relative flex justify-between items-center"
    >
      <div
        class="w-160px h-160px pos-absolute top--80px left-0 overflow-hidden b-rd-10px bg-#fff"
      >
        <img :src="detail?.brandLogo" class="object-contain" alt="" srcset="" />
      </div>
      <div class="w-1000px">
        <h1 class="fw-700 text-32px text-#363C40 !mb-24px">
          {{ detail?.brandName }}
        </h1>
        <div class="flex text-#999999 lh-24px">
          {{ detail?.brandStory }}
        </div>
      </div>
      <div v-if="!isLogin">
        <el-button
          type="primary"
          plain
          class="w-160px !bg-#C58C64 !text-#fff !h-40px !text-16px !fw-500 !b-rd-150px"
          @click="openLoginModal"
        >
          Sign on EJET
        </el-button>
      </div>
      <div v-else class="flex items-center">
        <el-button
          class="!bg-#CC9879 !text-#fff !w-120px !h-40px !b-rd-150px"
          @click="onFavorite(detail)"
        >
          {{ detail?.isFavorite ? "Unfollow" : "Follow" }}
        </el-button>
        <!-- <el-button class="!text-#C58C64 !w-120px !h-40px !b-rd-150px !ml-18px" @click="openMessage">
          Message
        </el-button> -->
      </div>
    </div>
    <div
      v-if="detail?.brandTag && tagList.length"
      class="flex flex-wrap gap-20px w-1400px mx-auto  mb-100px h-38px overflow-hidden"
    >
      <div
        v-for="(item, index) in tagList"
        :key="index"
        class="b-1px b-solid b-#d6ab92 b-rd-30px px-20px lh-36px text-#d6ab92"
      >
        {{ item }}
      </div>
    </div>
    <div class="w-1400px mx-auto mb-160px">
      <!-- <h2 class="!mb-68px fw-700 text-24px text-#333">
        All Products
      </h2> -->
      <div
        v-if="brandGoodsList.length"
        class="grid grid-gap-x-65px grid-gap-y-65px grid-cols-4"
      >
        <div v-for="item in brandGoodsList" :key="item.id">
          <common-goods-item :item />
        </div>
      </div>
      <common-empty v-else title="">
        <template #icon>
          <img
            src="~/assets/images/featured_empty.png"
            class="w-200px h-200px"
            alt=""
            srcset=""
          />
        </template>
      </common-empty>
      <div v-if="brandGoodsList.length" class="mt-60px flex justify-center">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="page_size"
          :pager-count="10"
          layout="prev, pager, next"
          :total="total"
          @change="changePage"
        />
      </div>
    </div>
    <business-brand-footer />
    <AppFooter />
  </div>
</template>

<style lang="less" scoped></style>